<template>
	<!-- view类似于html里面的div -->
	<!-- 弹性布局 
		结构的布局
		rpx 相对单位
	-->
	<view>
		<view class="box">
			<view>1</view>
			<view>2</view>
			<view>3</view>
		</view>
		<view class="swiper">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.box{
	width: 100%;
	height: 500px;
	border: 1px solid red;
	display: flex; /*让容器变成一个弹性盒子*/
	/* 控制子元素的排列方向 默认是横方向排列 */
	flex-direction: row;
	/* 控制主轴方向元素的排列方式  默认左对齐
	flex-start
	flex-end
	center
	space-between 两端对齐
	space-around 物体左右两边间距相同
	space-evenly 间隙均相同
	*/
	/* justify-content: center; */
	/* 控制和主轴垂直方向物体的排列 
		flex-start 默认
		flex-end 
		center
	*/
	/* align-items: center; */
	/* 控制元素是否折行 */
	flex-wrap: wrap;
	/* 控制换行后的排列方式
		stretch 默认 平均分竖直方向空间
		flex-start 换行后没有间隙
		flex-end 在下面进行排列
		center 居中排列
	 */
	align-content: stretch;
}
.box view{
	text-align: center;
	border: 1px solid blue;
	height: 100px;
	background: red;
}
.box view:nth-child(1){
	width: 30px;
}
.box view:nth-child(2){
	flex: 1;
}
.box view:nth-child(3){
	width: 30px;
}
.swiper{
	width: 748rpx;
	height: 300px;
	background:pink;
}
</style>
